<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            width: 300px;
            height: 200px;
            margin: auto;
            display: block;
            margin-top: 25%;
            background: linear-gradient(27deg,#90f7ec,#32ccbc);
            color: #fff200;
            font-size: 33px;
            font-family: 楷体;
            font-weight: 700;
            box-shadow: 3px 3px 3px black;
            border-radius: 10px;
            border: none;
            user-select: none;
        }
        button:active{
            box-shadow: none;
        }
        button:hover{
            cursor: pointer;
        }
        .msg{
            width: 200px;
            padding: 20px;
            position: fixed;
            bottom: 1px;
            right: 2px;
            border-radius: 10px;
            box-shadow: 3px 3px 3px black;
            user-select: none;
            transition-property: bottom right;
            transition-duration: 2s;
            z-index: 10;
            background: linear-gradient(135deg,#fc354c,#0abfbc);
            color:#fff200;
        }
    </style>
</head>
<body>
    <button onclick="send()">Click me</button>
    <script>
        var h = 50;
        function send(){
            var div = document.createElement("div");
            div.className = "msg";
            div.innerText = "这是一个假消息"
            document.body.appendChild(div);
            setTimeout(()=>{
                divHeightHandle();
            },10)
            setTimeout(() =>{
                div.style.right = '-240px'
                setTimeout(() => {
                    document.body.removeChild(div);
                },2000)
            },2000)
        }
        function divHeightHandle(){
            var divs = document.querySelectorAll("div");
            h = 80;
            divs.forEach(d => {
                d.style.bottom = h + 'vh';
                h -= 3;
            })
        }
    </script>
</body>
</html>